<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8">
<title>权限分配</title>

<link rel="stylesheet" href="/css/vendor/common.css" type="text/css">
<link rel="stylesheet" href="/css/vendor/cmp-controls.css" type="text/css">
<link href="/css/vendor/menu-selection.less" rel="stylesheet/less" type="text/css">
<script src="/js/less.min.js"></script>
</head>

<body>
<main>
    <div class="user-box">
        <h2 class="title">权限分配</h2>
        <ul id="user-list">
            <li onClick='menuSelectionM.clickUserItem(this)'>
                <p class="title">18464564115</p>
                <p class="sub-title">深圳飞马机器人</p>
            </li> 
            <li onClick='menuSelectionM.clickUserItem(this)'>
                <p class="title">18464564115</p>
                <p class="sub-title">深圳飞马机器人</p>
            </li>
            <li onClick='menuSelectionM.clickUserItem(this)' selected>
                <p class="title">18464564115</p>
                <p class="sub-title">深圳飞马机器人</p>
            </li>
            <li onClick='menuSelectionM.clickUserItem(this)'>
                <p class="title">18464564115</p>
                <p class="sub-title">深圳飞马机器人</p>
            </li>
        </ul>
    </div>
    
    <div class="menu-box">
        <div class="src-menu-box">
            <h2 class="title">选择权限</h2>
            <div class="menu-table-wrap" id="src-menu-container">
                <!-- li中最后的label为下划线，二级菜单的最后一项没有下划线，所以不用加
                <table class="menu" cellpadding="0" cellspacing="0">
                    <tr class='m1'>
                        <td>
                            <img src='../main/assets/main_menu_cloud_monitor.png'>
                            <span class='name'>云监控</span>
                            <checkbox name=1 value='all'></checkbox>
                        </td> 
                    </tr> 
                    <tr class='m2'><td> 
                        <ul>
                            <li>总飞机数量<checkbox name=1 value="first"></checkbox><span style='background-color: #5bbef4;'></span><label></label></li>
                            <li>总飞行时间<checkbox name=1 value="sec"></checkbox><span style='background-color: #5bbef4;'></span><label></label></li>
                            <li>总飞机数量<checkbox name=1 value="third"></checkbox><span style='background-color: #5bbef4;'></span></li>
                        </ul>
                    </td></tr>
			    </table>
                -->
            </div>
            <div class="save-btn button" onClick="clickSave()">保 存</div>
        </div> 
        
        <div class="dest-menu-box">
            <h2 class="title">获得权限</h2>
            <div class="dash-frame"></div>
            <div class="menu-table-wrap" id="dest-menu-container">
                <!-- 目标菜单 -->
            </div>
        </div>
    </div>
</main>
</body>

<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/vendor/cmp-controls.js"></script>
<script src="/js/vendor/menu-selection.js"></script>
<script>
    function clickSave() {
        // 菜单保存成功后需要调用一下，用于同步目标菜单和源菜单
        menuSelectionM.menuSaved();
    }

    menuSelectionM.userSelectedItemCallback = function(item) {
        console.log("选择了用户  " + item.title + "   " + item.subTitle);
    }
    
    // 更新用户列表
    var userList = [{title: "186888888880", subTitle: "深圳飞马机器人"},
                   {title: "186888888881", subTitle: "深圳飞马机器人"},
                   {title: "186888888882", subTitle: "深圳飞马机器人"},
                   {title: "186888888883", subTitle: "深圳飞马机器人"},
                   {title: "186888888884", subTitle: "深圳飞马机器人"},
                   {title: "186888888885", subTitle: "深圳飞马机器人"},];
    menuSelectionM.setUserList(userList);
    
    // 更新菜单
    var srcMenu = [{
                    name: "飞行监控",
                    menuUrl: "",
                    iconUrl: "/images/main/main_menu_cloud_monitor.png",
                    bigIconUrl: "/images/main/main_menu_cloud_monitor_big.png",
                    background: "#50b6f2",
                    children:
                    [
                        {
                            name: "飞行监控",
                            menuUrl: "/monitor/sysMap",
                            checked: true,
                        },
                        {
                            name: "全局统计",
                            menuUrl: "/monitor/sysStat",
                            checked: true,
                        },
                        {
                            name: "对比统计",
                            menuUrl: "/monitor/sysCompareStat",
                            checked: false,
                        },
                    ],
                },
                {
                    name: "控制原理",
                    menuUrl: "",
                    iconUrl: "/images/main/main_menu_cloud_monitor.png",
                    bigIconUrl: "/images/main/main_menu_cloud_monitor_big.png",
                    background: "red",
                    children:
                    [
                        {
                            name: "控制 0",
                            menuUrl: "/monitor/sysMap",
                            checked: true,
                            enable: false,
                        },
                        {
                            name: "控制 1",
                            menuUrl: "/monitor/sysStat",
                            checked: true,
                            enable: true,
                        },
                        {
                            name: "控制 2",
                            menuUrl: "/monitor/sysCompareStat",
                            checked: true,
                        },
                    ],
                },];
    
    menuSelectionM.setSrcMenu(srcMenu);
    // 更新源菜单后需要绑定一下事件
    menuSelectionM.bindCheckboxEvent();
    menuSelectionM.menuChangedConfirmMsg = "目标菜单已改变，请确定是否退出!!!";
    
    // 获取目标菜单列表
    // menuSelectionM.destMenu;
    
</script>

</html>






